<template>
  <uni-popup ref="dialogRef" type="dialog" class="popup-user">
    <view class="box-wrap">
      <view class="info-wrap">
        <div class="text1">
          完成充电后，请在{{
            data.items.parkBufferTime || '0'
          }}分钟内拔枪离场，超时平台将收取相应费用!
        </div>
        <div class="text2">
          收费规则:{{ data.items.overtimeMoney || '--' }}元/{{ data.items.overtimeMin || '--' }}分钟
        </div>
        <div class="text2">
          不足{{ data.items.overtimeMin || '0' }}分钟按{{ data.items.overtimeMin || '0' }}分钟计算
        </div>
      </view>
      <view class="btn-wrap">
        <button class="btn btn1" @tap="close">取消</button>
        <button class="btn btn2" @tap="tapConfirm">确认</button>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
const dialogRef = ref();
const data = reactive({
  items: {} as any,
});

const open = (item: any) => {
  data.items = item;
  dialogRef?.value?.open();
};
const close = () => {
  dialogRef?.value?.close();
};
const emit = defineEmits(['start-charge']);
const tapConfirm = () => {
  close();
  emit('start-charge');
};

defineExpose({
  open,
});
</script>

<style lang="scss">
@import '@/components/popupUser/index.scss';
</style>

<style lang="scss" scoped>
.box-wrap {
  padding-top: 30px;
}
.info-wrap {
  width: 70vw;
  // padding-top: 30px;
}

.text1 {
  margin-bottom: 10px;
}
.text2 {
  line-height: 18px;
  color: #555;
  font-size: 12px;
}
</style>